<!DOCTYPE HTML>
<html>
  <head>
    <title>shootout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      body {
        background-color: #eee;
        font-family: Helvetica, Arial, sans-serif;
        margin: 0 10%;
        text-shadow: white 1px 1px 0px;
      }

      p {
        color: #777;
      }

      #header p {
        color: #555;
        font-size: 1.1em;
        font-weight: bold;
      }

      h1 {
        font-size: 7em;
        font-weight: bold;
        color: #333;
        margin-top: 0.10em;
        margin-bottom: -0.25em;
      }

      .chart {
        border: 4px solid #ccc;
        float: left;
        margin-right: 1em;
        margin-bottom: 1em;
      }

      #control {
        margin-bottom: 1em;
      }

      #progress {
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border: 1px solid #aaa;
        padding: 2px;
      }

      #progress div {
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        height: 25px;
        width: 0%;
        background-color: #888;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>shootout</h1>
      <p>Template benchmarks (ops per millisecond)</p>
    </div>

    <div id="control">
      <div id="progress"><div></div></div>
      <button id="run" style="display:none;">Run</button>
    </div>

    <div id="content">
      <div id="charts"></div>
      <p style="clear: both">Targets: <a href="http://akdubya.github.com/dustjs">Dust</a>, <a href="http://github.com/wycats/handlebars.js">Handlebars</a>, <a href="http://mustache.github.com/">Mustache</a>, <a href="http://api.jquery.com/tmpl/">jquery-tmpl</a>. Each benchmark runs once using an adaptive test cycles algorithm similar to the one found in <a href="http://github.com/broofa/jslitmus">jslitmus</a>.</p>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="uubench.js"></script>
    <script src="../dist/dust-full.min.js"></script>
    <script src="suites/dust_suite.js"></script>
    <script src="suites/mustache_suite.js"></script>
    <script src="suites/handlebars_suite.js"></script>
    <script src="suites/jquery_suite.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script> -->
    <!-- jquery tmpl is no longer maintained, using rawgithub as a last resort. Do not use rawgithub in prod. Use real CDNs for that -->
    <script src="http://rawgithub.com/BorisMoore/jquery-tmpl/master/jquery.tmpl.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.0', {packages: ['imagechart']});
    </script>

    <script>
      $(document).ready(function(){
        var testQueue = [];
        var $bar = $('#progress > div');
        var tick;

        function runAll() {
          $bar.css('width', "0%");
          $('#progress').show();
          for (var key in dustBench.benches) { testQueue.push(key) }
          tick = 100 / testQueue.length;
          $('#charts').empty();
          next();
        }

        function next() {
          var test = testQueue.shift();
          if (test) {
            runSuite(test);
          } else {
            $('#progress').fadeOut(1000, function() {
              $('#run').fadeIn();
            });
          }
        }

        function runSuite(type) {
          var rows = [];
          var suite = new uubench.Suite({
            iterations: 1000,
            result: function(name, stats) {
              var opms = stats.iterations/stats.elapsed;
              rows.push([name, opms]);
            },
            start: function() {
              $('#charts').append("<div id=\"" + type + "\" class=\"chart\"></div>");
            },
            done: function() {
              var pct = parseFloat($bar.css('width')) + tick;
              drawBarChart(type, rows);
              $('#progress > div').css('width', pct + "%");
              next();
            }
          });
          dustBench(suite, type, "dust");
          handlebarsBench(suite, type, "handlebars");
          //mustacheBench(suite, type, "mustache");
          jqueryBench(suite, type, "jquery");
          suite.run();
        }

        function drawBarChart(type, rows) {
          var dataTable = new google.visualization.DataTable();
          dataTable.addColumn("string", "engine");
          dataTable.addColumn("number", "ops");
          dataTable.addRows(rows);

          var chart = new google.visualization.ImageChart(document.getElementById(type));
          chart.draw(dataTable, {title: type, cht: 'bhs', chs: '420x175'});
        }

        $('#run').click(function() {
          $('#run').hide();
          runAll();
          return false;
        });

        runAll();
      });
    </script>
  </body>
</html>
